<template>
    <div class="activeRule">
        <div class="banner">
            <img src="" alt="">
        </div>
        <div class="content">
            <h1 class="title">活动简介</h1>
            <p>相对自由的文字排版、图片穿插，两边分别至少留白30px。汤姆，一个手艺精湛的建筑工匠，他虽然贫困交加却怀揣了不起的梦想，就是亲手建造一座大教堂，这个梦想如影随形，无论遇到了什么样的恶劣环境，都不曾动摇他的梦想。</p>
            <img class="con_img" src="" alt="">
        </div>
        <div class="content">
            <h1 class="title">活动说明</h1>
            <p>1、相对自由的文字排版图片穿插，两边分别至少留30px。<br/>
2、汤姆，一个手艺精湛的建筑工匠，他虽然贫困交加却怀<br/>
3、揣了不起的梦想，就是亲手建造一座大教堂，这个梦想<br/>
4、如影随形，无论遇到了什么样的恶劣环境，都不曾动摇他的梦想。</p>
        </div>
        <div class="content">
            <h1 class="title">投票规则</h1>
            <p>1、相对自由的文字排版图片穿插，两边分别至少留白30px。<br/>
2、汤姆，一个手艺精湛的建筑工匠，他虽然贫困交加却怀<br/>
3、揣了不起的梦想，就是亲手建造一座大教堂，这个梦想<br/>
4、如影随形，无论遇到了什么样的恶劣环境，都不曾动摇他的梦想。</p>
            <img src="" alt="">
        </div>
    </div>
</template>
<script>
export default {
  name: "activeRule",
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="less" scoped>
@import url(../assets/less/public.less);
.activeRule {
    background: @config_bg2;
  .banner {
    height: 296px;
    background: @config_bg6;
  }
  .content{
      background: @config_bg1;
      box-sizing: border-box;
      margin: 30px auto;
      width: 690px;
      border-radius:6px;
      overflow: hidden;
      .title{
          background: @config_bg7;
          @color1();
          height: 80px;
          line-height: 80px;
          padding-left: 20px;
          box-sizing: border-box;
          text-align: left;
          @font16();
      }
      p{
          padding: 40px 30px 20px;
          box-sizing: border-box;
          text-align: left;
          line-height: 1.7em;
          @font12();
      }
      .con_img{
          width: 630px;
          margin: 0 auto;
      }
  }
}
</style>


